<template>
  <div class="listen skeleton">
    <!-- 全局loading -->
    <LoadingV2 v-if="globalLoading" text="音频文件获取中" />
    <!--引用组件-->
    <Skeleton :loading="loading" :animation="true" bg-color="#FFF" />
    <!-- 书籍信息 -->
    <view class="listen__header">
      <view class="listen__header-name skeleton-rect">
        {{ bookInfo.name || '这是书籍名称' }}
      </view>
      <view class="listen__header-author skeleton-rect">
        {{ bookInfo.chapterName || '这是章节名称' }}
      </view>
      <LazyLoadImg
        class="skeleton-rect"
        threshold="-450"
        width="133"
        height="188"
        img-mode="aspectFit"
        border-radius="10"
        :image="bookInfo.img"
      />
    </view>
    <!-- 控制器 -->
    <Controller @switch-chapter="loadpreOrNextChapter" />
    <!-- 书籍评论 -->
    <Comments :bookid="bookid" />
    <!-- 书籍推荐 -->
    <Recommends v-if="bookid" key-str="book" :extra="{ bookid }" />
    <!-- 下载app -->
    <PageFooter />
  </div>
</template>

<script>
import LazyLoadImg from '@/components/LazyLoadImg2';
import Controller from './components/Controller';
import Comments from '../bookdetail/components/Comments';
import Recommends from '@/components/Recommend';
import PageFooter from '@/components/PageFooter';
import Skeleton from '@/components/Skeleton2';
import LoadingV2 from '@/components/LoadingV2';
import { mapState } from 'vuex';

export default {
  components: {
    LazyLoadImg,
    Controller,
    Comments,
    Recommends,
    PageFooter,
    Skeleton,
    LoadingV2,
  },

  data() {
    return {
      loading: false,
      globalLoading: false,
    };
  },

  computed: {
    ...mapState({
      bookid: (state) => state.listen.bookid,
      chapterNum: (state) => state.listen.chapterNum,
      chapterIndex: (state) => state.listen.chapterIndex,
      bookInfo: (state) => state.listen.bookInfo,
    }),
  },

  onLoad(options) {
    this.$store.commit('updateListen', {
      bookid: options.book,
      chapterNum: options.chapter,
      chapterIndex: +options.num,
    });
    this.fetchChapterInfo({ chapter: options.chapter });
  },

  methods: {
    fetchChapterInfo({ chapter, loading = false }) {
      this.loading = true;
      if (loading) this.globalLoading = true;
      this.$http({
        method: 'GET',
        url: '/api/front/chapter/detail',
        data: {
          bookid: this.bookid,
          chapter_num: chapter || this.chapterNum,
          return_voice: 1,
        },
        needAuth: true,
        errorText: '获取书籍信息失败',
      })
        .then((res) => {
          this.loading = false;
          if (res.ok) {
            this.$store.commit('updateListen', {
              bookInfo: {
                name: res.bookname,
                author: res.author,
                img: res.headimg,
                newest: res.newest,
                chapterName: `第${res.data.num}章 ${res.data.name}`,
              },
              voices: res.data.voices,
              chapterNum: res.data.num,
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        })
        .finally(() => {
          if (loading) this.globalLoading = false;
        });
    },

    // 切换章节
    loadpreOrNextChapter(preOrNext) {
      if (preOrNext === 'pre') {
        const preChapterNum = this.chapterNum - 1;
        if (preChapterNum <= 0) {
          uni.showToast({ title: '当前已经是第一章了', icon: 'none' });
          return false;
        }
        this.$store.commit('updateListen', {
          chapterNum: preChapterNum,
        });
        this.fetchChapterInfo({
          chapter: preChapterNum,
          loading: true,
        });
      } else if (preOrNext === 'next') {
        const nextChapterNum = this.chapterNum + 1;
        if (nextChapterNum > this.maxChapterNum) {
          uni.showToast({ title: '当前已经是最后一章了', icon: 'none' });
          return false;
        }
        this.$store.commit('updateListen', {
          chapterNum: nextChapterNum,
        });
        this.fetchChapterInfo({
          chapter: nextChapterNum,
          loading: true,
        });
      }
    },
  },
};
</script>

<style lang="scss">
.listen {
  &__header {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;

    &-name {
      font-size: 40rpx;
      font-weight: 500;
      color: #2b3133;
      line-height: 1;
      margin-top: 24rpx;
      margin-bottom: 24rpx;
    }

    &-author {
      font-size: 28rpx;
      font-weight: 500;
      color: #95a1a6;
      line-height: 1;
      margin-bottom: 40rpx;
    }

    &-img {
      width: 266rpx;
      height: 376rpx;
      margin-bottom: 84rpx;
    }
  }
}
</style>
